<template>
  <div>
    <tabbar v-show="!isShop&&configBtn.isShowBtn" v-model="footerStateMsg">
      <tabbar-item v-if="configBtn.isShopIndex" @click.native="footerChangeAnimation(0)" :link="RouteUrl.INDEX">
        <img v-if="footerStateMsg == 0" slot="icon" src="~assets/x3/footer/home.png">
        <img v-if="footerStateMsg != 0" slot="icon" src="~assets/x3/footer/home_disable.png">
        <span class="footer__title" slot="label">{{ $t('index') }}</span>
      </tabbar-item>
      <tabbar-item v-if="configBtn.isShopService" @click.native="footerChangeAnimation(1)" :link="RouteUrl.INSURANCE">
        <!-- show-dot -->
        <img v-if="footerStateMsg == 1" slot="icon" src="~assets/x3/footer/insurance.png">
        <img v-if="footerStateMsg != 1" slot="icon" src="~assets/x3/footer/insurance_disable.png">
        <span class="footer__title" slot="label">{{ $t('insurance') }}</span>
      </tabbar-item>
      <tabbar-item v-if="configBtn.isShopMore" @click.native="footerChangeAnimation(2)" :link="RouteUrl.SERVICE">
        <img v-if="footerStateMsg == 2" slot="icon" src="~assets/x3/footer/service_root.png">
        <img v-if="footerStateMsg != 2" slot="icon" src="~assets/x3/footer/service_root_disable.png">
        <span class="footer__title" slot="label">{{ $t('service') }}</span>
      </tabbar-item>
      <tabbar-item v-if="configBtn.isShowMy" @click.native="footerChangeAnimation(3)" :link="RouteUrl.MY">
        <!-- badge="2" -->
        <img v-if="footerStateMsg == 3" slot="icon" src="~assets/x3/footer/my_center.png">
        <img v-if="footerStateMsg != 3" slot="icon" src="~assets/x3/footer/my_center_disable.png">
        <span class="footer__title" slot="label">{{ $t('my') }}</span>
      </tabbar-item>
    </tabbar>
  </div>
</template>

<script>
import { FooterIndex, PopState, RouteUrl, Mutations } from "src/common/const";
import { Tabbar, TabbarItem } from "vux";
import { mapState, mapActions } from "vuex";
export default {
  computed: mapState(["popState", "footerState", "configBtn", "isShop", "uuid"]),
  components: {
    Tabbar,
    TabbarItem
  },
  data() {
    return {
      RouteUrl: {},
      footerStateMsg: 0,
      clickNum: 0,
      // isShowFoot: true,
    };
  },
  watch: {
    footerState(cur, old) {
      this.footerStateMsg = cur;
    }
  },
  beforeRouteEnter(to, from, next) {
    localStorage["FOOTER_FROM_URL"] = from.path;
    next();
  },
  methods: {
    ...mapActions(["updatedFooterState", "updatedPopState"]),
    footerChangeAnimation(newVal) {
      if (this.footerStateMsg == newVal) {
        this.clickNum++;
      } else {
        this.clickNum = 0;
      }
      if (this.clickNum == 15) {
        alert(this.uuid);
      }
      // let iframe = {
      //     isIframe: false,
      // };
      // this.$store.commit(Mutations.SET_IFRAME_DATA, iframe);
      if (this.footerStateMsg < newVal) {
        this.updatedPopState(PopState.VUX_POP_NULL);
      } else {
        this.updatedPopState(PopState.VUX_POP_NULL);
      }
    }
  },
  mounted() {
    let _this = this;
    this.RouteUrl = RouteUrl;
    // if (localStorage["FOOTER_FROM_URL"] == RouteUrl.SHOP_INDEX) {
    //   this.isShowFoot = false;
    // }
    setTimeout(function () {
      _this.footerStateMsg = _this.footerState;
    }, 0);
  }
};
</script>


<style lang="scss" scoped>
.footer__title {
  font-size: 12px;
}
</style>

